<template>
	<view class="">
		<view class="search-box">
			<u-search placeholder="请输入姓名" v-model="searchData.name" @search="onSearch" shape="square" :showAction="false" />
			<view class="custom-btn" @click.stop="$u.route('/pages/customer/information')">新增客户</view>
		</view>
		<view class="my-list">
			<u-list :height="swiperHeight" @scrolltolower="scrolltolower" v-if="clientList.length > 0">
				<u-list-item v-for="(item, index) in clientList" :key="index">
					<view class="client-list-item" @click="onRadio(item)">
						<image class="img" :src="item.avatarImage"></image>
						<view class="tx">
							<text class>{{item.nickName}}</text>
							<text class="fsize-24 line-gray">{{item.mobile}}</text>
						</view>
						<view class="icon">
							<u-icon name="arrow-right" color="#aaa" size="22" />
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="clientList.length === 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	import { mapState } from 'vuex'
	export default {
		mixins:[listHeightMixin],
		data(){
			return {
				clientList: [],
				
				total: 1, // 总页数
				searchData: {
					clientType:'',
					name: '',
					page: 1,
					limit: 10,
				}
			}
		},
		onLoad() {
			this.getCurrentPages()
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods: {
			getCurrentPages(){
				this.searchData.clientType = this.userInfo.roleCategoryId
				this.$reqPost('GetShareholderUsersPageList', this.searchData).then(res=>{
					if(res.count === 0 || res.count <= this.searchData.limit){
						this.total = 1
					}else {
						this.total = res.count%this.searchData.limit==0?(res.count/this.searchData.limit):(Math.floor(res.count/this.searchData.limit)+1);
					}
					this.clientList = [...this.clientList, ...res.data]
				})
			},
			onSearch(){
				this.clientList = []
				this.searchData.page = 1
				this.getCurrentPages()
			},
			// 选择数据
			onRadio(row){
				let data = {
					id: row.id,
					nickName: row.nickName,
					mobile: row.mobile
				}
				uni.$emit('client', data)
				uni.navigateBack()
			},
			scrolltolower(){
				if(this.searchData.page < this.total){
					this.searchData.page ++
					this.getCurrentPages()
				} else if (this.searchData.page >= this.total){
					return 
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.my-list{
		margin-top: 10rpx;
		.client-list-item{
			padding: 0 20rpx;
			display: flex;
			align-items: center;
			background-color: #fff;;
			.img{
				display: block;
				width: 90rpx;
				height: 90rpx;
				border-radius: 50rpx;
				flex-shrink: 0;
				background: url('../../static/logo.png') no-repeat center 0px;
				background-size: 100% 100%;
			}
			.tx{
				width: 100%;
				height: 80rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				border-bottom: 1px #f7f7f7 solid;
				margin: 0 10rpx 0 20rpx;
				padding: 30rpx 0;
			}
			.icon{
				flex-shrink: 0;
			}
		}
	}
</style>